<template>
  <div   :style="customStyle"  class="icon-title" :class="['icon-title--' + size, 'icon-title--' + type]">
    <!-- 图标/图片部分 -->
    <template v-if="icon || imgSrc">
      <i 
        v-if="icon && !imgSrc" 
        :class="['icon-title__icon', icon]" 
        :style="{ color: iconColor || textColor }"
      ></i>
      
      <img 
        v-if="imgSrc" 
        :src="imgSrc" 
        :alt="imgAlt || title" 
        class="icon-title__img"
        :style="{ 
          width: imgWidth,
          height: imgHeight,
          borderRadius: imgBorderRadius
        }"
      />
    </template>
    
    <!-- 标题文本 -->
    <span 
      class="icon-title__text" 
      :style="{ 
        color: textColor,
        fontSize: fontSize ? fontSize : null,
        fontWeight: isBold ? 'bold' : (fontWeight || null)
      }"
    >
      {{ title }}
    </span>
    
    <!-- 可选的分隔线 -->
    <div 
      v-if="showDivider" 
      class="icon-title__divider"
      :style="{ 
        backgroundColor: dividerColor,
        height: dividerHeight
      }"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'IconTitle',
  props: {
    // 标题文本
    title: {
      type: String,
      required: true,
      default: ''
    },
    // 字体图标类名（支持Font Awesome、Element图标等）
    icon: {
      type: String,
      default: ''
    },
    // 图片图标路径
    imgSrc: {
      type: String,
      default: ''
    },
    // 图片alt属性
    imgAlt: {
      type: String,
      default: ''
    },
    // 图片宽度
    imgWidth: {
      type: String,
      default: '24px'
    },
    // 图片高度
    imgHeight: {
      type: String,
      default: '24px'
    },
    // 图片圆角
    imgBorderRadius: {
      type: String,
      default: '0'
    },
    // 字体图标颜色
    iconColor: {
      type: String,
      default: ''
    },
    // 文字颜色
    textColor: {
      type: String,
      default: '#323232'
    },
    // 文字大小
    fontSize: {
      type: String,
      default: ''
    },
    // 是否加粗
    isBold: {
      type: Boolean,
      default: true
    },
    // 自定义字重（当isBold为false时使用）
    fontWeight: {
      type: [String, Number],
      default: ''
    },
    // 尺寸大小：small, medium, large
    size: {
      type: String,
      default: 'medium',
      validator: val => ['small', 'medium', 'large'].includes(val)
    },
    // 样式类型：primary, success, warning, danger, info
    type: {
      type: String,
      default: 'primary',
      validator: val => ['primary', 'success', 'warning', 'danger', 'info', 'default'].includes(val)
    },
    // 是否显示分隔线
    showDivider: {
      type: Boolean,
      default: false
    },
    // 分隔线颜色
    dividerColor: {
      type: String,
      default: '#e5e7eb'
    },
    // 分隔线高度
    dividerHeight: {
      type: String,
      default: '1px'
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>
.icon-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 10px 0 0 10px;
}

/* 字体图标样式 */
.icon-title__icon {
  transition: color 0.3s;
}

/* 图片图标样式 */
.icon-title__img {
  object-fit: contain;
  transition: all 0.3s;
}

/* 文本样式 */
.icon-title__text {
  font-weight: 500;
  transition: color 0.3s, font-size 0.3s;
}

/* 尺寸相关样式 */
.icon-title--small {
  .icon-title__icon {
    font-size: 16px;
  }
  .icon-title__text {
    font-size: 14px;
  }
}

.icon-title--medium {
  .icon-title__icon {
    font-size: 18px;
  }
  .icon-title__text {
    font-size: 16px;
  }
}

.icon-title--large {
  .icon-title__icon {
    font-size: 22px;
  }
  .icon-title__text {
    font-size: 18px;
  }
}

/* 类型相关样式 */
.icon-title--primary {
  .icon-title__text {
    color: #1890ff;
  }
}

.icon-title--success {
  .icon-title__text {
    color: #52c41a;
  }
}

.icon-title--warning {
  .icon-title__text {
    color: #faad14;
  }
}

.icon-title--danger {
  .icon-title__text {
    color: #ff4d4f;
  }
}

.icon-title--info {
  .icon-title__text {
    color: #40a9ff;
  }
}

.icon-title--default {
  .icon-title__text {
    color: #333333;
  }
}

/* 分隔线样式 */
.icon-title__divider {
  flex-grow: 1;
  margin-left: 12px;
  transition: background-color 0.3s, height 0.3s;
}
</style>
      